3
3
V
V
i
i
e
e
w
w
O
O
p
p
e
e
r
r
a
a
t
t
i
i
o
o
n
n
s
s
I
I
n
n
f
f
o
o
Views are elements which allow User to interact with your Application - this is known as User Interface (UI).
Views can be added and configured through: Code, Automatic Preview or Library.
We can categorize Views based on their purpose into
● Visible Views present some visual information to the User (Label, Text Field, Button, Image View)
● Container Views are used to contain other Views (Horizontal/Vertical Stack, Navigation View)
● Helper Views are also invisible but can't contain other Views (Spacer, Divider)
(Container and Helper Views allow us to more easily organize Visible Views and navigate through them)
Your application will contain one or more Screens which are shown as iPhones in your Automatic Preview.
Each Screen actually represents a single root View which is container for all other Views.
This root View can have many Sub Views each of which can have their own Sub Views which results in a View Hierarchy.
To switch between Screens (and transfer data) use NavigationView in combination with NavigatinLink.
S
S
t
t
a
a
r
r
t
t
i
i
n
n
g
g
C
C
o
o
d
d
e
e
When you create new Project below code s automatically generated which creates 2 Views
● Content View is Root View and takes up the whole Screen (it has iPhone frame around it)
● Text View is Sub View inside the Content View positioned at its center taking only as much space as it needs
ContentView.swift
struct ContentView : View {
var body : some View {
Text("Some Text").border(Color.red, width: 2)
}
}
Content View with Text View inside it at the center
C
C
o
o
d
d
e
e
E
E
x
x
p
p
l
l
a
a
n
n
a
a
t
t
i
i
o
o
n
n
When you create new Project auto generated code is actually a struct with a Computed Property body that has a getter.
Simplified Syntax
struct ContentView : View {
var body : some View { Text("Hello World") } //Computed Property : Data Type { getter code }
}
Explicit getter & return
struct ContentView : View {
var body : some View { get { return Text("Hello World") } }
}
s
s
t
t
r
r
u
u
c
c
t
t
C
C
o
o
n
n
t
t
e
e
n
n
t
t
V
V
i
i
e
e
w
w
:
:
V
V
i
i
e
e
w
w
First line declares struct called ContentView which implements View protocol.
View is basic protocol that must be adopted by anything you want to draw on the screen: text, buttons, images.
View protocol defines that structure must have Computed Property body of Data Type some View.
v
v
a
a
r
r
b
b
o
o
d
d
y
y
:
:
s
s
o
o
m
m
e
e
V
V
i
i
e
e
w
w
{
{
T
T
e
e
x
x
t
t
(
(
"
"
H
H
e
e
l
l
l
l
o
o
W
W
o
o
r
r
l
l
d
d
"
"
)
)
}
}
Second line defines Computed Property body of Data of type some View.
Computed Property only has getter method which is therefore omitted.
Since getter Method only has single line, return can also be omitted and created Text View Structure is returned.
C
C
o
o
d
d
e
e
A
A
l
l
t
t
e
e
r
r
a
a
t
t
i
i
o
o
n
n
s
s
To further improve our understanding of the starter code lets make few changes and observe what happens.
Adding aditional line, breaks the code because there is no return value defined
struct ContentView: View {
var body: some View {
Text("Hello World.")
Text("This is me.")
}
}
Adding return value fixes the code. But it is the second String that is now saved inside the body Variable.
struct ContentView: View {
var body: some View {
Text("Hello World.")
return Text("This is me.")
}
}
We can explicitly use return keyword even if there is just one line inside the Function
struct ContentView: View {
var body: some View {
return Text("This is me.")
}
}
We can write everything in one line to make it more clear that we are just storing data returned by Function into variable
struct ContentView: View {
var body: some View { return Text("This is me.") }}
